<template>
    <div class="change_pwd_fstep">
        <div class="header">
            <i @click='goBack' class="iconfont icon-xia"></i>重置登录密码
        </div>
        <div class="content">
            <li>此手机号用于接收短信验证码:</li>
            <div class="tele">{{tele}}</div>
            <div class="inp">
                <span class="sp1">请输入验证码</span>
                <div class="txt">
                    <input ref='code' type="text" style="border:0;outline: none"  value="请输入验证码" @click="inp">
                    <span style="right: 0;top: 0;" class="sp2" @click="getcode">{{gc}}</span>
                </div>
            </div>
            <div class="bt"><button class="confirm" style="outline: none" @click="qd">确定</button></div>
        </div>

    </div>
</template>

<script>
    import '@/css/change_pwd_fstep.css'
    import { Toast } from 'mint-ui';
    export default {
        name: "change_pwd_fstep",
        data(){
            return{
                tele:'',
                gc:'获取验证码',
                code:'',
            }
        },
        created(){
            this.tele = this.$store.state.userinfo.telphone;
        },
        methods:{
            inp(){
                let inp = document.querySelector('input');
                let sp1 = document.querySelector('.sp1');
                inp.value = '';
                inp.style.color = '#000000';
                sp1.style.display = 'block';
            },
            goBack () {
                window.history.length > 1
                    ? this.$router.go(-1)
                    : this.$router.push('/')
            },
            getcode:async function(){
                let time_number  = 60;
                this.gc = time_number;
                this.timer = setInterval(()=>{
                    time_number--;
                    this.gc = `${time_number}秒`;
                    if(this.gc==0){
                        this.gc = '重新发送';
                        clearInterval(this.timer);
                    }
                },1000);
                let res = await this.$api.post('/user/reg',{telphone:this.tele});
                let _res = res.data.info;
                let code = _res._code;
                Toast({
                    message: `验证码：${code}`,
                    duration: 3000
                });

            },
            qd:async function(){
                let code = this.$refs['code'].value;
                this.code = code;
                let res = await this.$api.post('/user/login',{
                    telphone:this.tele,
                    type:'2',
                    code:this.code,
                });
                let info = res.data.info;
                if(res.data.state){
                    Toast({
                        message: `玩命加载中`,
                        duration: 3000
                    });
                    setTimeout(()=>{this.$router.push({name:'change_pwd_sstep'});},1000);
                }else{
                    Toast({
                        message: `${info}`,
                        duration: 3000
                    });
                }
            }
        }
    }
</script>

<style scoped>

</style>